
import './products.less'


import Title from "../../components/Title/Title";

import React, { useEffect, useState } from 'react';
// import Pannel from '../../../component/pannel';
import * as echarts from 'echarts';
import { getstategoods } from '../../api/account';

export default function GoodsCount() {
    const [chartData, setChartData] = useState(null);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await getstategoods();
                console.log('Response:', response); // Log the response
                const data = await response.data.data;
                setChartData(data);
                console.log(response.data.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        fetchData();
    }, []);

    useEffect(() => {

        if (chartData) {
            const chartDom = document.getElementById('main');
            const myChart = echarts.init(chartDom);

            const option = {
                title: {
                    text: '商品统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: chartData.source && chartData.source.length > 0 ? chartData.source.map(item => ({
                        name: item.type,

                    })) : []
                },
                xAxis: {
                    type: 'category',
                    data: chartData.date && chartData.date.length > 0 ? chartData.date.map(item => item) : [] // 修改这里
                },
                yAxis: {
                    type: 'value'
                },
                series: chartData.source && chartData.source.length > 0 ? chartData.source.map(item => ({
                    name: item.type,
                    type: 'line',
                    data: item.data
                })) : []
            };

            myChart.setOption(option);
            console.log(option);

            return () => {
                myChart.dispose(); // Dispose echarts instance when component unmounts
            };
        }
    }, [chartData]);

    return (
        <div>
            <Title >
                <div id="main" style={{ width: '100%', height: '600px' }} />
            </Title>
        </div>
    );
}